﻿@page "/docs/helpers/colors"

<Seo Canonical="/docs/helpers/colors" Title="Blazorise Color Utilities" Description="Learn to use and work with the Blazorise contextual color classes that can be applied to most of your components." />

<DocsPageTitle>
    Color Utilities
</DocsPageTitle>

<DocsPageLead>
    Convey meaning through <Code>Color</Code> with a handful of color utility classes. Includes support for styling links with hover states, too.
</DocsPageLead>

<DocsPageParagraph>
    Here is a list of contextual classes that can be applied to most of your components:
</DocsPageParagraph>

<Alert Color="Color.Info" Visible>
    <AlertDescription>Keep in mind: All elements have a color <Code>None</Code> specified by default.</AlertDescription>
</Alert>

<DocsPageSection>
    <DocsPageSectionHeader Title="Color">
        <Paragraph>
            Colorize component with color utilities.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>None</Code> - no color will be assigned to an element.</UnorderedListItem>
            <UnorderedListItem><Code>Primary</Code> - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components.</UnorderedListItem>
            <UnorderedListItem><Code>Secondary</Code> - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.</UnorderedListItem>
            <UnorderedListItem><Code>Success</Code> - used to indicate the successful completion of an action that user triggered.</UnorderedListItem>
            <UnorderedListItem><Code>Danger</Code> - used to represent interface elements that the user should be made aware of.</UnorderedListItem>
            <UnorderedListItem><Code>Warning</Code> - used to represent potentially dangerous actions or important messages.</UnorderedListItem>
            <UnorderedListItem><Code>Info</Code> - used to present information to the user that is neutral and not necessarily important.</UnorderedListItem>
            <UnorderedListItem><Code>Light</Code> - used to indicate a lighter element that is a not important to the user.</UnorderedListItem>
            <UnorderedListItem><Code>Dark</Code> - used to indicate a dark element to bring it more into the user attention.</UnorderedListItem>
            <UnorderedListItem><Code>Link</Code> - used to indicate a link alike element color.</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Background">
        <Paragraph>
            Colorize background with color utilities.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>None</Code></UnorderedListItem>
            <UnorderedListItem><Code>Primary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Secondary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Success</Code></UnorderedListItem>
            <UnorderedListItem><Code>Danger</Code></UnorderedListItem>
            <UnorderedListItem><Code>Warning</Code></UnorderedListItem>
            <UnorderedListItem><Code>Info</Code></UnorderedListItem>
            <UnorderedListItem><Code>Light</Code></UnorderedListItem>
            <UnorderedListItem><Code>Dark</Code></UnorderedListItem>
            <UnorderedListItem><Code>White</Code></UnorderedListItem>
            <UnorderedListItem><Code>Transparent</Code></UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="TextColor">
        <Paragraph>
            Colorize text with color utilities.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>None</Code></UnorderedListItem>
            <UnorderedListItem><Code>Primary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Secondary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Success</Code></UnorderedListItem>
            <UnorderedListItem><Code>Danger</Code></UnorderedListItem>
            <UnorderedListItem><Code>Warning</Code></UnorderedListItem>
            <UnorderedListItem><Code>Info</Code></UnorderedListItem>
            <UnorderedListItem><Code>Light</Code></UnorderedListItem>
            <UnorderedListItem><Code>Dark</Code></UnorderedListItem>
            <UnorderedListItem><Code>Body</Code></UnorderedListItem>
            <UnorderedListItem><Code>Muted</Code></UnorderedListItem>
            <UnorderedListItem><Code>White</Code></UnorderedListItem>
            <UnorderedListItem><Code>Black50</Code></UnorderedListItem>
            <UnorderedListItem><Code>White50</Code></UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="SnackbarColor">
        <UnorderedList>
            <UnorderedListItem><Code>None</Code></UnorderedListItem>
            <UnorderedListItem><Code>Primary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Secondary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Success</Code></UnorderedListItem>
            <UnorderedListItem><Code>Danger</Code></UnorderedListItem>
            <UnorderedListItem><Code>Warning</Code></UnorderedListItem>
            <UnorderedListItem><Code>Info</Code></UnorderedListItem>
            <UnorderedListItem><Code>Light</Code></UnorderedListItem>
            <UnorderedListItem><Code>Dark</Code></UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

